<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>知识总结（二）浏览器基础知识 | lty的博客</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/blog/favicon.ico">
    <meta name="description" content="山重水复疑无路，柳暗花明又一村">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    
    <link rel="preload" href="/blog/assets/css/0.styles.ca934e57.css" as="style"><link rel="preload" href="/blog/assets/js/app.2c497286.js" as="script"><link rel="preload" href="/blog/assets/js/3.1e41fb2d.js" as="script"><link rel="preload" href="/blog/assets/js/1.a1bf8e1e.js" as="script"><link rel="preload" href="/blog/assets/js/32.72aa7ec8.js" as="script"><link rel="prefetch" href="/blog/assets/js/10.595db545.js"><link rel="prefetch" href="/blog/assets/js/11.a57c5d33.js"><link rel="prefetch" href="/blog/assets/js/12.bbd60eab.js"><link rel="prefetch" href="/blog/assets/js/13.0a322639.js"><link rel="prefetch" href="/blog/assets/js/14.45182424.js"><link rel="prefetch" href="/blog/assets/js/15.8bfecd82.js"><link rel="prefetch" href="/blog/assets/js/16.f295f32f.js"><link rel="prefetch" href="/blog/assets/js/17.de5dabe7.js"><link rel="prefetch" href="/blog/assets/js/18.dbcf4366.js"><link rel="prefetch" href="/blog/assets/js/19.dc4ed650.js"><link rel="prefetch" href="/blog/assets/js/20.9000ffe3.js"><link rel="prefetch" href="/blog/assets/js/21.50c08d3d.js"><link rel="prefetch" href="/blog/assets/js/22.849f004a.js"><link rel="prefetch" href="/blog/assets/js/23.4c25a240.js"><link rel="prefetch" href="/blog/assets/js/24.a2930e6d.js"><link rel="prefetch" href="/blog/assets/js/25.20efd6e6.js"><link rel="prefetch" href="/blog/assets/js/26.1881faa9.js"><link rel="prefetch" href="/blog/assets/js/27.18bc2dfe.js"><link rel="prefetch" href="/blog/assets/js/28.903117fb.js"><link rel="prefetch" href="/blog/assets/js/29.e1d01502.js"><link rel="prefetch" href="/blog/assets/js/30.27049c11.js"><link rel="prefetch" href="/blog/assets/js/31.455cb7a6.js"><link rel="prefetch" href="/blog/assets/js/33.6362e43e.js"><link rel="prefetch" href="/blog/assets/js/34.30160844.js"><link rel="prefetch" href="/blog/assets/js/35.991fefa1.js"><link rel="prefetch" href="/blog/assets/js/36.3350110b.js"><link rel="prefetch" href="/blog/assets/js/37.38b67684.js"><link rel="prefetch" href="/blog/assets/js/38.33876f62.js"><link rel="prefetch" href="/blog/assets/js/4.870f2524.js"><link rel="prefetch" href="/blog/assets/js/5.516ed845.js"><link rel="prefetch" href="/blog/assets/js/6.710883e3.js"><link rel="prefetch" href="/blog/assets/js/7.3579268a.js"><link rel="prefetch" href="/blog/assets/js/8.1e580575.js"><link rel="prefetch" href="/blog/assets/js/9.08e245bf.js">
    <link rel="stylesheet" href="/blog/assets/css/0.styles.ca934e57.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container no-sidebar" data-v-1aefc0b4><div data-v-1aefc0b4><div id="loader-wrapper" class="loading-wrapper" data-v-d48f4d20 data-v-1aefc0b4 data-v-1aefc0b4><div class="loader-main" data-v-d48f4d20><div data-v-d48f4d20></div><div data-v-d48f4d20></div><div data-v-d48f4d20></div><div data-v-d48f4d20></div></div> <!----> <!----></div> <div class="password-shadow password-wrapper-out" style="display:none;" data-v-25ba6db2 data-v-1aefc0b4 data-v-1aefc0b4><h3 class="title" data-v-25ba6db2 data-v-25ba6db2>lty的博客</h3> <p class="description" data-v-25ba6db2 data-v-25ba6db2>山重水复疑无路，柳暗花明又一村</p> <label id="box" class="inputBox" data-v-25ba6db2 data-v-25ba6db2><input type="password" value="" data-v-25ba6db2> <span data-v-25ba6db2>Konck! Knock!</span> <button data-v-25ba6db2>OK</button></label> <div class="footer" data-v-25ba6db2 data-v-25ba6db2><span data-v-25ba6db2><i class="iconfont reco-theme" data-v-25ba6db2></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-25ba6db2>vuePress-theme-reco</a></span> <span data-v-25ba6db2><i class="iconfont reco-copyright" data-v-25ba6db2></i> <a data-v-25ba6db2><span data-v-25ba6db2>lty</span>
            
          <!---->
          2022
        </a></span></div></div> <div class="hide" data-v-1aefc0b4><header class="navbar" data-v-1aefc0b4><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/blog/" class="home-link router-link-active"><img src="/blog/logo.png" alt="lty的博客" class="logo"> <span class="site-name">lty的博客</span></a> <div class="links"><div class="color-picker"><a class="color-button"><i class="iconfont reco-color"></i></a> <div class="color-picker-menu" style="display:none;"><div class="mode-options"><h4 class="title">Choose mode</h4> <ul class="color-mode-options"><li class="dark">dark</li><li class="auto active">auto</li><li class="light">light</li></ul></div></div></div> <div class="search-box"><i class="iconfont reco-search"></i> <input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/blog/" class="nav-link"><i class="iconfont reco-home"></i>
  主页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      分类
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/categories/JavaScript/" class="nav-link"><i class="undefined"></i>
  JavaScript
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/投资/" class="nav-link"><i class="undefined"></i>
  投资
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/计算机网络/" class="nav-link"><i class="undefined"></i>
  计算机网络
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/前端相关/" class="nav-link"><i class="undefined"></i>
  前端相关
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/知识总结/" class="nav-link"><i class="undefined"></i>
  知识总结
</a></li></ul></div></div><div class="nav-item"><a href="/blog/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><a href="/blog/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
  时间线
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      关于
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://gitee.com/ekzodia_lty" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-mayun"></i>
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask" data-v-1aefc0b4></div> <aside class="sidebar" data-v-1aefc0b4><div class="personal-info-wrapper" data-v-39576ba9 data-v-1aefc0b4><img src="/blog/avatar.jpg" alt="author-avatar" class="personal-img" data-v-39576ba9> <h3 class="name" data-v-39576ba9>
    lty
  </h3> <div class="num" data-v-39576ba9><div data-v-39576ba9><h3 data-v-39576ba9>27</h3> <h6 data-v-39576ba9>Articles</h6></div> <div data-v-39576ba9><h3 data-v-39576ba9>18</h3> <h6 data-v-39576ba9>Tags</h6></div></div> <ul class="social-links" data-v-39576ba9></ul> <hr data-v-39576ba9></div> <nav class="nav-links"><div class="nav-item"><a href="/blog/" class="nav-link"><i class="iconfont reco-home"></i>
  主页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      分类
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/categories/JavaScript/" class="nav-link"><i class="undefined"></i>
  JavaScript
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/投资/" class="nav-link"><i class="undefined"></i>
  投资
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/计算机网络/" class="nav-link"><i class="undefined"></i>
  计算机网络
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/前端相关/" class="nav-link"><i class="undefined"></i>
  前端相关
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/知识总结/" class="nav-link"><i class="undefined"></i>
  知识总结
</a></li></ul></div></div><div class="nav-item"><a href="/blog/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><a href="/blog/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
  时间线
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      关于
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://gitee.com/ekzodia_lty" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-mayun"></i>
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav> <!----> </aside> <div class="password-shadow password-wrapper-in" style="display:none;" data-v-25ba6db2 data-v-1aefc0b4><h3 class="title" data-v-25ba6db2 data-v-25ba6db2>知识总结（二）浏览器基础知识</h3> <!----> <label id="box" class="inputBox" data-v-25ba6db2 data-v-25ba6db2><input type="password" value="" data-v-25ba6db2> <span data-v-25ba6db2>Konck! Knock!</span> <button data-v-25ba6db2>OK</button></label> <div class="footer" data-v-25ba6db2 data-v-25ba6db2><span data-v-25ba6db2><i class="iconfont reco-theme" data-v-25ba6db2></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-25ba6db2>vuePress-theme-reco</a></span> <span data-v-25ba6db2><i class="iconfont reco-copyright" data-v-25ba6db2></i> <a data-v-25ba6db2><span data-v-25ba6db2>lty</span>
            
          <!---->
          2022
        </a></span></div></div> <div data-v-1aefc0b4><main class="page"><section><div class="page-title"><h1 class="title">知识总结（二）浏览器基础知识</h1> <div data-v-f875f3fc><i class="iconfont reco-account" data-v-f875f3fc><span data-v-f875f3fc>lty</span></i> <i class="iconfont reco-date" data-v-f875f3fc><span data-v-f875f3fc>2/16/2022</span></i> <i class="iconfont reco-eye" data-v-f875f3fc><span id="/blog/blogs/Summary/2.browser.html" data-flag-title="Your Article Title" class="leancloud-visitors" data-v-f875f3fc><a class="leancloud-visitors-count" style="font-size:.9rem;font-weight:normal;color:#999;"></a></span></i> <i class="tags iconfont reco-tag" data-v-f875f3fc><span class="tag-item" data-v-f875f3fc>浏览器</span></i></div></div> <div class="theme-reco-content content__default"><h2 id="事件机制"><a href="#事件机制" class="header-anchor">#</a> 事件机制</h2> <h3 id="事件触发的过程"><a href="#事件触发的过程" class="header-anchor">#</a> 事件触发的过程</h3> <ul><li>捕获阶段：事件从根节点流向目标节点，途中流经各个DOM节点，在各个节点上触发捕获事件，直到达到目标节点；</li> <li>目标阶段：事件到达目标节点时，就到了目标阶段，事件在目标节点上被触发；</li> <li>冒泡阶段：事件在目标节点上触发后，不会终止，一层层向上冒泡，回溯到根节点；</li></ul> <h3 id="注册事件"><a href="#注册事件" class="header-anchor">#</a> 注册事件</h3> <p>通常我们使用 addEventListener注册事件，该函数的第三个参数是布尔值，默认是false，时间句柄在冒泡阶段执行。</p> <blockquote><p><em>element</em>.addEventListener(event, function, useCapture);</p></blockquote> <h3 id="事件代理-事件委托"><a href="#事件代理-事件委托" class="header-anchor">#</a> 事件代理（事件委托）</h3> <p>JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown......）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。</p> <p>事件代理的方式相较于直接给目标注册事件来说，有以下优点：</p> <ul><li>节省内存，管理的函数变少了。不需要为每个元素都添加监听函数；</li> <li>不需要给子节点注销事件；</li> <li>可以方便地动态添加和修改元素，不需要因为元素的改动而修改事件绑定；</li> <li>JavaScript和DOM节点之间的关联变少了，这样也就减少了因循环引用而带来的内存泄漏发生的概率。</li></ul> <h3 id="js实现事件代理"><a href="#js实现事件代理" class="header-anchor">#</a> JS实现事件代理</h3> <p>Event对象提供了一个属性叫target，可以返回事件的目标节点，我们成为事件源，也就是说，target就可以表示为当前的事件操作的dom，但是不是真正操作dom。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>myLinks<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>goSomewhere<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Go somewhere<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>doSomething<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Do something<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sayHi<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Say hi<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
        <span class="token keyword">var</span> item1 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;goSomewhere&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">var</span> item2 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;doSomething&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">var</span> item3 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;sayHi&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

        document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&quot;click&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">var</span> target <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">;</span>
            <span class="token keyword">switch</span> <span class="token punctuation">(</span>target<span class="token punctuation">.</span>id<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword">case</span> <span class="token string">&quot;doSomething&quot;</span><span class="token operator">:</span>
                    document<span class="token punctuation">.</span>title <span class="token operator">=</span> <span class="token string">&quot;事件委托&quot;</span><span class="token punctuation">;</span>
                    <span class="token keyword">break</span><span class="token punctuation">;</span>
                <span class="token keyword">case</span> <span class="token string">&quot;goSomewhere&quot;</span><span class="token operator">:</span>
                    location<span class="token punctuation">.</span>href <span class="token operator">=</span> <span class="token string">&quot;http://www.baidu.com&quot;</span><span class="token punctuation">;</span>
                    <span class="token keyword">break</span><span class="token punctuation">;</span>
                <span class="token keyword">case</span> <span class="token string">&quot;sayHi&quot;</span><span class="token operator">:</span>
                    <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;hi&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    <span class="token keyword">break</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><h2 id="跨域"><a href="#跨域" class="header-anchor">#</a> 跨域</h2> <p>涉及面试题：什么是跨域？为什么浏览器要使用同源策略？你有几种方式可以解决跨域问题？了解预检请求嘛？</p> <h3 id="什么是跨域"><a href="#什么是跨域" class="header-anchor">#</a> 什么是跨域</h3> <p>因为浏览器出于安全考虑，有同源策略。也就是说，如果协议、域名或者端口有一个不同就是跨域，Ajax 请求会失败。</p> <p><strong>那么是出于什么安全考虑才会引入这种机制呢？</strong> 其实主要是用来防止 CSRF 攻击的。简单点说，CSRF 攻击是利用用户的登录态发起恶意请求。</p> <p><strong>跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了</strong>。</p> <p>也就是说，没有同源策略的情况下，A 网站可以被任意其他来源的 Ajax 访问到内容。如果你当前 A 网站还存在登录态，那么对方就可以通过 Ajax 获得你的任何信息。当然跨域并不能完全阻止 CSRF，因为请求毕竟是发出去了。</p> <h3 id="同源策略"><a href="#同源策略" class="header-anchor">#</a> 同源策略</h3> <p>最早由网景公司提出，是浏览器的一种安全策略。</p> <p>同源：协议、域名、端口号必须相同。</p> <h3 id="解决跨域问题的方式"><a href="#解决跨域问题的方式" class="header-anchor">#</a> 解决跨域问题的方式</h3> <h4 id="jsonp"><a href="#jsonp" class="header-anchor">#</a> JSONP</h4> <p><strong>JSONP只支持GET请求，JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。</strong></p> <p>有三个标签是允许跨域加载资源：</p> <ul><li><code>&lt;img src=XXX&gt;</code></li> <li><code>&lt;link href=XXX&gt;</code></li> <li><code>&lt;script src=XXX&gt;</code></li></ul> <p><strong>利用 <code>&lt;script&gt;</code> 标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的 JSON 数据。JSONP请求一定需要对方的服务器做支持才可以。</strong></p> <p>JSONP优点是简单兼容性好，可用于解决主流浏览器的跨域数据访问的问题。<strong>缺点是仅支持get方法具有局限性,不安全可能会遭受XSS攻击。</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">&quot;http://domain/api?param1=a&amp;param2=b&amp;callback=jsonp&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
    <span class="token keyword">function</span> <span class="token function">jsonp</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    	console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
	<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>    
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="cors"><a href="#cors" class="header-anchor">#</a> CORS</h3> <p><strong>CORS支持所有类型的HTTP请求，是跨域HTTP请求的根本解决方案，CORS需要浏览器和后端同时支持</strong>。</p> <p>浏览器会自动进行 CORS 通信，实现 CORS 通信的关键是后端。只要后端实现了 CORS，就实现了跨域。</p> <p>服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。 该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源。</p> <p>虽然设置 CORS 和前端没什么关系，但是通过这种方式解决跨域问题的话，会在发送请求时出现两种情况，分别为<strong>简单请求</strong>和<strong>复杂请求</strong>。</p> <h4 id="_1-简单请求"><a href="#_1-简单请求" class="header-anchor">#</a> 1) 简单请求</h4> <p>只要同时满足以下两大条件，就属于简单请求</p> <p>条件1：使用下列方法之一：</p> <ul><li>GET</li> <li>HEAD</li> <li>POST</li></ul> <p>条件2：Content-Type 的值仅限于下列三者之一：</p> <ul><li>text/plain</li> <li>multipart/form-data</li> <li>application/x-www-form-urlencoded</li></ul> <h4 id="_2-复杂请求"><a href="#_2-复杂请求" class="header-anchor">#</a> 2) 复杂请求</h4> <p>不符合以上条件的请求就肯定是复杂请求了。 复杂请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为&quot;预检&quot;请求,该请求是 option 方法的，通过该请求来知道服务端是否允许跨域请求。</p> <h3 id="node中间件代理"><a href="#node中间件代理" class="header-anchor">#</a> Node中间件代理</h3> <p>实现原理：<strong>同源策略是浏览器需要遵循的标准，而如果是服务器向服务器请求就无需遵循同源策略。</strong> 代理服务器，需要做以下几个步骤：</p> <ul><li>接受客户端请求 。</li> <li>将请求 转发给服务器。</li> <li>拿到服务器 响应 数据。</li> <li>将 响应 转发给客户端。</li></ul> <h3 id="websocket"><a href="#websocket" class="header-anchor">#</a> websocket</h3> <p>Websocket是HTML5的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案。WebSocket和HTTP都是应用层协议，都基于 TCP 协议。但是 <strong>WebSocket 是一种双向通信协议，在建立连接之后，WebSocket 的 server 与 client 都能主动向对方发送或接收数据</strong>。同时，WebSocket 在建立连接时需要借助 HTTP 协议，连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了。</p> <h3 id="nginx反向代理"><a href="#nginx反向代理" class="header-anchor">#</a> nginx反向代理</h3> <p>实现原理类似于Node中间件代理，需要你搭建一个中转nginx服务器，用于转发请求。</p> <p>使用nginx反向代理实现跨域，是最简单的跨域方式。只需要修改nginx的配置即可解决跨域问题，支持所有浏览器，支持session，不需要修改任何代码，并且不会影响服务器性能。</p> <p>实现思路：通过nginx配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录。</p> <h3 id="其他方法"><a href="#其他方法" class="header-anchor">#</a> 其他方法</h3> <ul><li>postMessage</li> <li>windows.name+iframe</li> <li>location.hash+iframe</li> <li>document.domain+iframe</li></ul> <h2 id="性能优化"><a href="#性能优化" class="header-anchor">#</a> 性能优化</h2> <ul><li>减少页面体积，提升网络加载
<ul><li>静态资源的压缩合并（JS 代码压缩合并、CSS 代码压缩合并、雪碧图）</li> <li>静态资源缓存（资源名称加 MD5 戳）</li> <li>使用 CDN 让资源加载更快</li></ul></li> <li>优化页面渲染
<ul><li>CSS 放前面，JS 放后面</li> <li>懒加载（图片懒加载、下拉加载更多）</li> <li>减少DOM 查询，对 DOM 查询做缓存</li> <li>减少DOM 操作，多个操作尽量合并在一起执行（<code>DocumentFragment</code>）</li> <li>事件节流</li> <li>尽早执行操作（<code>DOMContentLoaded</code>）</li> <li>使用 SSR 后端渲染，数据直接输出到 HTML 中，减少浏览器使用 JS 模板渲染页面 HTML 的时间</li></ul></li></ul> <h2 id="回流-reflow-和重绘-repaint"><a href="#回流-reflow-和重绘-repaint" class="header-anchor">#</a> 回流（reflow）和重绘（repaint）</h2> <h3 id="什么叫回流"><a href="#什么叫回流" class="header-anchor">#</a> 什么叫回流？</h3> <p>当我们render tree中的一些元素的结构或者尺寸等发生改变，浏览器重新渲染部分或者全部文档的过程就叫做回流。</p> <h3 id="会导致回流的操作"><a href="#会导致回流的操作" class="header-anchor">#</a> 会导致回流的操作？</h3> <ul><li>页面的首次渲染</li> <li>浏览器窗口大小发生变化</li> <li>内容变换</li> <li>添加或者删除节点</li> <li>激活CSS伪类</li> <li>clinentWidth</li></ul> <h3 id="什么是重绘"><a href="#什么是重绘" class="header-anchor">#</a> 什么是重绘？</h3> <p>当前页面中的元素样式改变不影响它在文档流中的位置，浏览器会将新样式赋予给元素，这个过程叫做重绘。</p> <h3 id="导致重绘的操作"><a href="#导致重绘的操作" class="header-anchor">#</a> 导致重绘的操作？</h3> <ul><li>background</li> <li>visibility</li></ul> <h3 id="总结"><a href="#总结" class="header-anchor">#</a> 总结</h3> <p>回流一定会引起重绘，重绘不一定能引起回流。</p> <p>回流的性能消耗要比重绘大。</p> <h2 id="从输入-url-到页面加载完成的过程中都发生了什么事情"><a href="#从输入-url-到页面加载完成的过程中都发生了什么事情" class="header-anchor">#</a> 从输入 URL 到页面加载完成的过程中都发生了什么事情？</h2> <h2 id="垃圾回收机制gc"><a href="#垃圾回收机制gc" class="header-anchor">#</a> 垃圾回收机制GC</h2> <p>JS内存垃圾回收使用的算法：</p> <ul><li>引用计数（之前，会有循环引用的问题）</li> <li>标记清除（现在）</li></ul> <h2 id="进程和线程"><a href="#进程和线程" class="header-anchor">#</a> 进程和线程</h2> <p>进程，OS进行资源分配和调度的最小单位，有独立内存空间；</p> <p>线程，OS进行匀速那调度的最小单位，共享进程内存空间；</p> <p>JS是单线程的，但可以开启多进程执行，如WebWorker；</p> <h2 id="cookie和token"><a href="#cookie和token" class="header-anchor">#</a> cookie和token</h2> <p><strong>cookie</strong></p> <ul><li>HTTP无状态，每次请求都要带cookie，以帮助识别身份；</li> <li>服务端也可以向客户端set-cookie，cookie大小限制为4k；</li> <li>默认有跨域限制：不可跨域共享、传递cookie；</li> <li>HTML5之前常被用于本地储存，之后推荐使用localStorage和sessionStorage；</li></ul> <p><strong>cookie和session</strong></p> <ul><li>cookie用于登陆验证，存储用户标识（如userId）</li> <li>session在服务端，存储用户详细信息，和cookie信息一一对应；</li> <li>cookie+session是常见的登陆验证解决方案；</li></ul> <p><img src="https://gitee.com/ekzodia_lty/blog-image/raw/master/img/d774a34a76d006cd4d86d0c701049e8.png" alt=""></p> <p><strong>现代浏览器开始禁止第三方cookie</strong></p> <ul><li>和跨域限制不同，这里是：禁止网页引入第三方JS设置cookie；</li> <li>打击第三方广告，保护用户隐私；</li> <li>新增SameSite：Strict/Lax/None;值可自己选择。</li></ul> <p><strong>token VS cookie</strong></p> <ul><li>cookie是HTTP规范，而token是自定义传递；</li> <li>cookie会默认被浏览器存储，而token需自己储存；</li> <li>token默认没有跨域限制；</li></ul> <p><strong>JWT（JSON Web Token）</strong></p> <ul><li>可以代替cookie+session的方案；</li> <li>前端发起登录，后端验证成功之后，返回一个加密的token；</li> <li>前端自行存储token（其中包含了被加密的用户信息）；</li> <li>以后访问服务端接口，都携带这个token作为用户信息；</li></ul> <p><strong>JWT的优点</strong></p> <ul><li>不占用服务端内存；</li> <li>多进程、多服务器不受影响；</li> <li>没有跨域限制；</li></ul> <p><strong>JWT的缺点</strong></p> <ul><li>用户信息储存在客户端，无法快速封禁某用户；</li> <li>万一服务端密钥被泄露，则用户数据全部丢失；</li> <li>token体积一般大于cookie，会增加请求的数量；</li></ul> <h2 id="localstorage-和-sessionstorage"><a href="#localstorage-和-sessionstorage" class="header-anchor">#</a> localStorage 和 sessionStorage</h2> <ul><li>HTML5 专门为存储来设计的，最大可存 5M。</li> <li>API 简单易用， setItem getItem。</li> <li>不会随着 http 请求被发送到服务端。</li></ul> <p><strong>区别：</strong></p> <ul><li>localStorage 数据会永久存储，除非代码删除或手动删除。</li> <li>sessionStorage 数据只存在于当前会话，浏览器关闭则清空。</li> <li>一般用 localStorage 会多一些。</li></ul> <blockquote><p>参考链接：</p> <p><a href="https://blog.csdn.net/qq_38128179/article/details/86293394" target="_blank" rel="noopener noreferrer">JavaScript事件代理（事件委托）_越努力，越幸运！-CSDN博客_事件委托<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><a href="http://fex.baidu.com/blog/2014/05/what-happen/" target="_blank" rel="noopener noreferrer">从输入 URL 到页面加载完成的过程中都发生了什么事情？ - FEX (baidu.com)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><a href="https://juejin.cn/post/6981588276356317214#heading-0" target="_blank" rel="noopener noreferrer">「硬核JS」你真的了解垃圾回收机制吗 - 掘金 (juejin.cn)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><a href="https://www.cnblogs.com/fs0196/p/12685254.html" target="_blank" rel="noopener noreferrer">浏览器事件机制中 事件触发的三个阶段 - DAVENEE - 博客园 (cnblogs.com)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><a href="https://blog.csdn.net/qq_38128179/article/details/86293394" target="_blank" rel="noopener noreferrer">JavaScript事件代理（事件委托）_越努力，越幸运！-CSDN博客_事件委托<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><a href="https://juejin.cn/post/6844903767226351623#heading-0" target="_blank" rel="noopener noreferrer">九种跨域方式实现原理（完整版） - 掘金 (juejin.cn)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote></div></section> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">3/20/2022, 10:07:00 PM</span></div></footer> <!----> <div class="comments-wrapper"><!----></div> <ul class="side-bar sub-sidebar-wrapper" style="width:12rem;" data-v-cb1513f6><li class="level-2" data-v-cb1513f6><a href="/blog/blogs/Summary/2.browser.html#事件机制" class="sidebar-link reco-side-事件机制" data-v-cb1513f6>事件机制</a></li><li class="level-3" data-v-cb1513f6><a href="/blog/blogs/Summary/2.browser.html#事件触发的过程" class="sidebar-link reco-side-事件触发的过程" data-v-cb1513f6>事件触发的过程</a></li><li class="level-3" data-v-cb1513f6><a href="/blog/blogs/Summary/2.browser.html#注册事件" class="sidebar-link reco-side-注册事件" data-v-cb1513f6>注册事件</a></li><li class="level-3" data-v-cb1513f6><a href="/blog/blogs/Summary/2.browser.html#事件代理-事件委托" class="sidebar-link reco-side-事件代理-事件委托" data-v-cb1513f6>事件代理（事件委托）</a></li><li class="level-3" data-v-cb1513f6><a href="/blog/blogs/Summary/2.browser.html#js实现事件代理" class="sidebar-link reco-side-js实现事件代理" data-v-cb1513f6>JS实现事件代理</a></li><li class="level-2" data-v-cb1513f6><a href="/blog/blogs/Summary/2.browser.html#跨域" class="sidebar-link reco-side-跨域" data-v-cb1513f6>跨域</a></li><li class="level-3" data-v-cb1513f6><a href="/blog/blogs/Summary/2.browser.html#什么是跨域" class="sidebar-link reco-side-什么是跨域" data-v-cb1513f6>什么是跨域</a></li><li class="level-3" data-v-cb1513f6><a href="/blog/blogs/Summary/2.browser.html#同源策略" class="sidebar-link reco-side-同源策略" data-v-cb1513f6>同源策略</a></li><li class="level-3" data-v-cb1513f6><a href="/blog/blogs/Summary/2.browser.html#解决跨域问题的方式" class="sidebar-link reco-side-解决跨域问题的方式" data-v-cb1513f6>解决跨域问题的方式</a></li><li class="level-3" data-v-cb1513f6><a href="/blog/blogs/Summary/2.browser.html#cors" class="sidebar-link reco-side-cors" data-v-cb1513f6>CORS</a></li><li class="level-3" data-v-cb1513f6><a href="/blog/blogs/Summary/2.browser.html#node中间件代理" class="sidebar-link reco-side-node中间件代理" data-v-cb1513f6>Node中间件代理</a></li><li class="level-3" data-v-cb1513f6><a href="/blog/blogs/Summary/2.browser.html#websocket" class="sidebar-link reco-side-websocket" data-v-cb1513f6>websocket</a></li><li class="level-3" data-v-cb1513f6><a href="/blog/blogs/Summary/2.browser.html#nginx反向代理" class="sidebar-link reco-side-nginx反向代理" data-v-cb1513f6>nginx反向代理</a></li><li class="level-3" data-v-cb1513f6><a href="/blog/blogs/Summary/2.browser.html#其他方法" class="sidebar-link reco-side-其他方法" data-v-cb1513f6>其他方法</a></li><li class="level-2" data-v-cb1513f6><a href="/blog/blogs/Summary/2.browser.html#性能优化" class="sidebar-link reco-side-性能优化" data-v-cb1513f6>性能优化</a></li><li class="level-2" data-v-cb1513f6><a href="/blog/blogs/Summary/2.browser.html#回流-reflow-和重绘-repaint" class="sidebar-link reco-side-回流-reflow-和重绘-repaint" data-v-cb1513f6>回流（reflow）和重绘（repaint）</a></li><li class="level-3" data-v-cb1513f6><a href="/blog/blogs/Summary/2.browser.html#什么叫回流" class="sidebar-link reco-side-什么叫回流" data-v-cb1513f6>什么叫回流？</a></li><li class="level-3" data-v-cb1513f6><a href="/blog/blogs/Summary/2.browser.html#会导致回流的操作" class="sidebar-link reco-side-会导致回流的操作" data-v-cb1513f6>会导致回流的操作？</a></li><li class="level-3" data-v-cb1513f6><a href="/blog/blogs/Summary/2.browser.html#什么是重绘" class="sidebar-link reco-side-什么是重绘" data-v-cb1513f6>什么是重绘？</a></li><li class="level-3" data-v-cb1513f6><a href="/blog/blogs/Summary/2.browser.html#导致重绘的操作" class="sidebar-link reco-side-导致重绘的操作" data-v-cb1513f6>导致重绘的操作？</a></li><li class="level-3" data-v-cb1513f6><a href="/blog/blogs/Summary/2.browser.html#总结" class="sidebar-link reco-side-总结" data-v-cb1513f6>总结</a></li><li class="level-2" data-v-cb1513f6><a href="/blog/blogs/Summary/2.browser.html#从输入-url-到页面加载完成的过程中都发生了什么事情" class="sidebar-link reco-side-从输入-url-到页面加载完成的过程中都发生了什么事情" data-v-cb1513f6>从输入 URL 到页面加载完成的过程中都发生了什么事情？</a></li><li class="level-2" data-v-cb1513f6><a href="/blog/blogs/Summary/2.browser.html#垃圾回收机制gc" class="sidebar-link reco-side-垃圾回收机制gc" data-v-cb1513f6>垃圾回收机制GC</a></li><li class="level-2" data-v-cb1513f6><a href="/blog/blogs/Summary/2.browser.html#进程和线程" class="sidebar-link reco-side-进程和线程" data-v-cb1513f6>进程和线程</a></li><li class="level-2" data-v-cb1513f6><a href="/blog/blogs/Summary/2.browser.html#cookie和token" class="sidebar-link reco-side-cookie和token" data-v-cb1513f6>cookie和token</a></li><li class="level-2" data-v-cb1513f6><a href="/blog/blogs/Summary/2.browser.html#localstorage-和-sessionstorage" class="sidebar-link reco-side-localstorage-和-sessionstorage" data-v-cb1513f6>localStorage 和 sessionStorage</a></li></ul></main> <!----></div></div></div></div><div class="global-ui"><div class="back-to-ceiling" style="right:1rem;bottom:6rem;width:2.5rem;height:2.5rem;border-radius:.25rem;line-height:2.5rem;display:none;" data-v-c6073ba8 data-v-c6073ba8><svg t="1574745035067" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5404" class="icon" data-v-c6073ba8><path d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z" p-id="5405" data-v-c6073ba8></path><path d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z" p-id="5406" data-v-c6073ba8></path></svg></div></div></div>
    <script src="/blog/assets/js/app.2c497286.js" defer></script><script src="/blog/assets/js/3.1e41fb2d.js" defer></script><script src="/blog/assets/js/1.a1bf8e1e.js" defer></script><script src="/blog/assets/js/32.72aa7ec8.js" defer></script>
  </body>
</html>
